// pages/goods-shop/goods-shop.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        query:{},
        goodsShop:[],
        page:1,//默认渲染第一页数据
        pageSize:10,//每一页渲染多少条数据
        total:0 ,//总跳数据
        loading:false
    },
    /* 
    上拉触底
    1           2       3             4
    10         10+10  10 + 10 +10   40
    res.data   this.data.goodsShop + res.data 

    到多少条时数据就请求完毕 共计80条数据

    首次渲染 得到10条数据
    上拉触底一次 再发送一次请
    如何开启上拉触底
    在当前页面的json文件中写
     "onReachBottomDistance": 50 
     滚动条距离底部的距离 可以50（默认）也可以是其他值

     限制 一次请求 10条数据进行渲染 当我们上拉触底再发送一次请求再请求10
     1一次就相当于1页  一页10 第二20  第30

     当我们上拉触底的操作比较快  数据请求比较慢 触底了数据还没有请求回来 又触底了数据上一次的可能还没有回来
     wx.request请求排队 卡死 做个优化操作  节流
     做一个标识  loading  false  
     首次允许请求  loading  
     当wx.requeset 正在请求中 不允许再发送请求 loading 
     当wxwx.request 请求结束  允许再发送请求  loading 

    if(this.data.loading) return  loading true 劫住 允许发送

     wx.request({
       url: 'url',
       complete:()=>{
           当请求结束后会触发该函数
       }
     })





    */
    getGoodsShopList(){
        this.setData({
            loading:true
        })
        // 准备发送请求 加载数据
        wx.showLoading({
            title:'数据正在加载'
        })
        wx.request({
          url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
          data:{
              _page:this.data.page,
              _limit:this.data.pageSize
          },
          method:'get',
          success:(res)=>{
              console.log(res);
              this.setData({
                  goodsShop:[...this.data.goodsShop,...res.data],
                  total:res.header['X-Total-Count'] - 0,
              })
          },
        //   接口调用结束的回调函数（调用成功、失败都会执行）	
          complete:()=>{
              console.log('数据调用结束');
              wx.hideLoading();
                // ?  理论上数据调用结束后就允许再发送请求
                this.setData({
                    loading:false
                })
          }
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        console.log(options);
        // setData指的是更改小程序中data中的值的方式
        // 获取data当中的值 this.data.xx
        this.setData({
            query:options
        });
      this.getGoodsShopList();
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        // 可以在此处进行设置navigationBar的title
        wx.setNavigationBarTitle({
            title:this.data.query.name
        })
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        console.log('上拉触底');
        // 上拉触底一次 page + 1
        this.setData({
            page: this.data.page + 1
        })
        // 当数据渲染完毕 告诉用户数据渲染完了
        // total :80  =< this.data.page * this.data.pageSize 数据渲染完毕
        if(this.data.page * this.data.pageSize >= this.data.total){
            return wx.showToast({
              title: '数据加载完毕',
              icon:"none"
            })
        }
        // 判断是否允许发送请求数据
        // true 允许  false 不允许

        /* 
        loading 默认 false
        首次 onload  getGoodsShopList(wx.request)  loading  true
        非首次 上拉触底触发  需要判断是否需要发送request
        this.data.loading 
        this.data.loading 为true 截住不允许发送request
        if（this.data.loading）return
        this.getGoodsShopList()

        
        上拉触底
        ①如何开启上拉触底
        ②发送请求
        url method data succes complete  fail
        ③节流阀设置
        ④icon
        
        */
        if(this.data.loading) return;
        // 发送网络请求
        this.getGoodsShopList();

        /* 
        初始状态：loading false
        首次 onload getGoodsShopList loading true

        非首次 上拉触底的操作来触发
        */

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})